<template>
	<view class="content">
		<view class="row phone_num t_size_31">
			<view class="col-3">
				+86
			</view>
			<view class="col-21">
				{{userInfo.telephone.substr(0,3) + '****' + userInfo.telephone.substr(7,4)}}
			</view>
		</view>
		<view class="row t_size_31">
			<view class="col-16">
				<input type="text" value="" placeholder="请输入验证码" />
			</view>
			<view class="col-8">
				<button type="primary" @click="sendSms()">{{sendSms_txt}}</button>
			</view>
		</view>
		<view class="row t_size_31">
			<view class="col-16">
				<input type="password" v-model="objPage.password" placeholder="请输入新密码" />
			</view>
		</view>
		<view class="row t_size_31">
			<view class="col-16">
				<input type="password" v-model="objPage.passwordT" placeholder="再次输入密码" />
			</view>
		</view>
		<view class="row ts t_size_28">
			至少包含数字、字母、符号中的两种元素
		</view>
		<view class="btn">
			<button type="primary" @click="submit()">确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				userInfo: {
					telephone: ''
				},
				sendSms_txt: '获取验证码',
				send: true,
				objPage:{
					password: "",
					passwordT: ""
				}
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo');
		},
		methods:{
			async sendSms(){
				if(!this.send){
					return
				}
				this.send = false;
				var timer = 60,that = this,setTimer = setInterval(()=>{
					timer--;
					that.sendSms_txt = `${timer}重新发送`;
					if(timer == 1){
						that.sendSms_txt = '重新发送';
						that.send = true;
					}
				},1000)
			},
			async submit(){
				if(this.objPage.password == ''){
					this.$public.showToast('请输入密码')
					return
				}
				if(this.objPage.password != this.objPage.passwordT){
					this.$public.showToast('两次密码输入不一致')
					return
				}
				let res = await this.$api.request(this.$api.public.setPassWord,this.objPage);
				if(res == undefined){
					this.$public.showToast('修改成功');
					setTimeout(()=>{
						uni.navigateBack()
					},800)
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.content{
		padding: 21rpx 0;
	}
	.row{
		width: 92%;
		padding: 0 4%;
		height: 120rpx;
		line-height: 120rpx;
		background-color: #FFFFFF;
		border-bottom: 1px solid #ededed;
		input{
			height: 100%;
			line-height: 1;
		}
		button{
			height: 64rpx;
			line-height: 64rpx;
			margin-top: 28rpx;
			font-size: 26rpx;
			color: #6CBF30;
			border: 1px solid #6CBF30;
			background-color: #FFFFFF;
		}
	}
	.phone_num{
		color: #333333;
	}
	.ts{
		color: #B3B3B3;
		background-color: #f5f5f5;
		border: none;
		line-height: 3;
	}
	.btn{
		width: 92%;
		padding: 0 4%;
		margin-top: 35rpx;
		button{
			width: 100%;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 48rpx;
			background-color: #6CBF30;
		}
	}
</style>
